<template>
    <div class="box">
        <div class="bg">
                <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
            >
            <el-form-item label="用户名" prop="users">
                <el-input type="text" v-model="ruleForm.users" autocomplete="off" style="width:85%;"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass">
                <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" style="width:85%;"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
                <router-link to="sign"><el-button>注册</el-button></router-link>
            </el-form-item>
            </el-form>
        </div>
    </div>
</template>
    <script>
export default {
    data() {
        var validateUser = (rule,value, callback) => {
        if (value === "") {
            callback(new Error("用户名不能为空"));
        }else{
            if (this.ruleForm.users !== '') {
            this.$refs.ruleForm.validateField('pass');
           }
            callback();
        }
        };
        var validatePass = (rule,value, callback) => {
        if (value === "") {
            callback(new Error("请输入密码"));
        } else {
            callback();
        }
        };
        return {
        ruleForm: {
            users: "",
            checkPass: "",
        },
        rules: {
            users: [{ validator: validateUser, trigger: "blur" }],
            checkPass: [{ validator: validatePass, trigger: "blur" }],
        }
        };
    },
    // created() {
    //     localStorage.clear()  
    // },
    methods: {
        submitForm(formName) {
        this.$refs[formName].validate(valid => {
            if (valid) {
            // window.localStorage.setItem("username",this.ruleForm.users)
            // this.$router.push({name:'about'});
            // console.log(this.ruleForm.users)
            var params ={
                userName:this.ruleForm.users,
                userPass:this.ruleForm.checkPass
            }
            this.$api.$post("/getUserInfo",{params:params}).then((res)=>{
                console.log(res)
                window.sessionStorage.setItem("userInfo",JSON.stringify(res.data.data))
                this.$message('登陆成功');  
                this.$router.push({name:'about'});
            })
            } else {
            console.log("error submit!!");
            return false;
            }
        });
        },
        resetForm(formName) {
        this.$refs[formName].resetFields();
        }
    }
    }
</script>
<style lang="scss" scoped>
    .box{
        height: 100%;
        background-size: cover;
        background-color:pink;
    }
    .bg{
        background:#fff;
        width: 400px;
        margin:0 auto;
        padding: 30px 30px 10px 20px;
        position: relative;
        top:180px;
        border-radius: 10px;
    }
</style>